<template>
    <div class="friend-list">
        <h3>好友列表</h3>
        <ul>
            <li v-for="item in 10" :key="item">
                <!-- <router-link :to="'/interaction/userfriend/fd/' + item ">好友{{item}}</router-link> -->
                <router-link :to="{name:'fd',params:{id:item}}">好友{{item}}</router-link>
            </li>
        </ul>
        <div>
            <transition name="slide-left" mode="out-in">
                <router-view class="child-view"></router-view>
            </transition>
        </div>
    </div>
</template>
<script>
export default {
 
};
</script>
<style scoped>
.friend-list {
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: 40px auto;
}
.friend-list h3 {
  grid-column: 1/3;
}
.friend-list ul {
  padding-left: 10px;
  list-style: none;
}

.friend-list > div {
  width: 350px;
  height: 100px;
  padding: 10px 10px;
  margin: 20px 0;
  border: 1px dashed black;
  border-radius: 20px;
}
.child-view {
  position: absolute;
  transition: all 1s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter {
  opacity: 0;
  -webkit-transform: translate(60px, 0);
  transform: translate(60px, 0);
}
.slide-left-leave-active {
  opacity: 0;
  -webkit-transform: translate(-60px, 0);
  transform: translate(-60px, 0);
}
</style>

